<template>
    <div>
        <div v-if="$helper.isMobile()">
            <el-date-picker
                style="width: 180px;"
                v-model="selectedVal[0]"
                type="datetime"
                @change="submit"
                default-time="00:00:00">
            </el-date-picker>
            -
            <el-date-picker
                style="width: 180px;"
                v-model="selectedVal[1]"
                type="datetime"
                value-format="timestamp"
                @change="submit"
                default-time="23:59:59">
            </el-date-picker>
        </div>

        <div v-else>
            <el-date-picker
                v-model="selectedVal"
                :clearable="clearable"
                type="datetimerange"
                value-format="timestamp"
                :picker-options="rangeOptions"
                :unlink-panels="true"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                @change="submit"
                align="right">
            </el-date-picker>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: Array,
                default: [],
            },
            type: {
                type: String,
                default: 'past',
            },
            clearable: {
                type: Boolean,
                default: true,
            },
        },
        data () {
            return {
                selectedVal: [],
                rangeOptions: null,
            };
        },
        computed: {

        },
        watch: {
            value(v) {
                this.syncForm();
            },
            // selectedVal() {
            //     this.submit();
            // }
        },
        methods: {
            syncForm() {
                if (!this.value) {
                    this.selectedVal = [];
                    return;
                }
                if (this.value.length) {
                    this.$set(this.selectedVal, 0, this.value[0] * 1000);
                    this.$set(this.selectedVal, 1, this.value[1] * 1000);
                }
            },
            submit() {
                if (!this.selectedVal) {
                    this.$emit('input', []);
                    return;
                }
                // 跟现有值不同则更新
                let val = [this.value[0], this.value[1]];
                if (this.selectedVal[0] && (!this.value[0] || this.selectedVal[0].toString().indexOf(this.value[0].toString()) === -1)) {
                    val[0] = parseInt(this.selectedVal[0] / 1000);
                }
                if (this.selectedVal[1] && (!this.value[1] || this.selectedVal[1].toString().indexOf(this.value[1].toString()) === -1)) {
                    val[1] = parseInt(this.selectedVal[1] / 1000);
                }
                this.$emit('input', val);
            }
        },
        created() {
            if (this.type === 'past') {
                this.rangeOptions = this.$store.state.backend.pastRangeOptions;
            } else if (this.type === 'future') {
                this.rangeOptions = this.$store.state.backend.futureRangeOptions;
            }
            this.syncForm();
        }
    }
</script>

<style scoped>

</style>
